@import "base/common";
@import "base/friends-link";

// ==============================================
// index-banner
// ==============================================
.index-banner{
	position: relative;

	.swiper-wrapper{
		position: relative;
		height: 670px;

		.swiper-slide{
			@include position(absolute, 10, 0, none, none, 0);
			width: 100%;
			min-width: 1100px;
			height: 670px;
			opacity: 0;
			@include transition(all, .5s, ease, 0);
			
			.container{
				position: relative;
				height: 670px;
				overflow: hidden;
			}

			h1{
				opacity: 0;
				@include translate(0, 40px, 0);
				@include transitionTransform(opacity, .3s, ease, 0);
			}

			h2{
				opacity: 0;
				@include translate(0, 40px, 0);
				@include transitionTransform(opacity, .3s, ease, 0);
			}
			
			.btn-box{
				opacity: 0;
				@include translate(0, 40px, 0);
				@include transitionTransform(opacity, .3s, ease, 0);

				.btn-detail{
					display: block;
					width: 193px;
					height: 42px;
					margin: 90px auto 0;
					border: 1px solid #e19c10;
					border-radius: 21px;
					font-size: 18px;
					color: #e19c10;
					text-align: center;
					line-height: 42px;
					letter-spacing: 2px;
					@include transition(all, .3s, ease, 0);

					&:hover{
						background-color: #e19c10;
						color: $colorFFF;
						@include transition(all, .3s, ease, 0);
					}
				}
			}
			
			&.slide-01{
				@include backgroundImage('../image/index-banner-bg-1-1920x670.jpg', no-repeat, center, center, auto, 100%);
				
				h1{
					width: 427px;
					height: 85px;
					margin: 205px auto 0;
					@include backgroundImage('../image/index-banenr-1-text-1-427x85.png', no-repeat, center, center, auto, 100%);
				}
				h2{
					width: 412px;
					height: 19px;
					margin: 43px auto 0;
					@include backgroundImage('../image/index-banenr-1-text-2-412x19.png', no-repeat, center, center, auto, 100%);
				}
			}
			&.slide-02{
				@include backgroundImage('../image/index-banner-bg-2-1920x670.jpg', no-repeat, center, center, auto, 100%);
				
				h1{
					width: 311px;
					height: 75px;
					margin: 215px auto 0;
					@include backgroundImage('../image/index-banenr-2-text-1-311x75.png', no-repeat, center, center, auto, 100%);
				}
				h2{
					width: 302px;
					height: 28px;
					margin: 34px auto 0;
					@include backgroundImage('../image/index-banenr-2-text-2-302x28.png', no-repeat, center, center, auto, 100%);
				}
			}

			&.active{
				z-index: 20 !important;
				opacity: 1;
				@include transition(all, .5s, ease, 0);

				h1{
					opacity: 1;
					@include translate(0, 0, 0);
					@include transitionTransform(opacity, .4s, ease, .1s);
				}
				h2{
					opacity: 1;
					@include translate(0, 0, 0);
					@include transitionTransform(opacity, .4s, ease, .2s);
				}
				.btn-box{
					opacity: 1;
					@include translate(0, 0, 0);
					@include transitionTransform(opacity, .4s, ease, .3s);
				}
			}
		}
	}

	.arrow-bar{
		@include position(absolute, 30, 310px, none, none, 0);
		width: 100%;
		min-width: 1100px;
		opacity: 0;
		@include translate(0, 40px, 0);

		&.active{
			opacity: 1;
			@include translate(0, 0, 0);
			@include transitionTransform(opacity, .4s, ease, .1s);
		}

		.container{
			height: 50px;
		}

		.arrow-left, .arrow-right{
			width: 50px;
			height: 50px;
			border-radius: 50%;
		}

		.arrow-left{
			float: left;
			@include backgroundImage('../image/icon-arrow-left-50x50.png', no-repeat, center, center, 100%, 100%);
			@include transition(all, .3s, ease, 0);

			&:hover{
				@include backgroundImage('../image/icon-arrow-left-hover-50x50.png', no-repeat, center, center, 100%, 100%);
				@include transition(all, .3s, ease, 0);
			}
		}
		.arrow-right{
			float: right;
			@include backgroundImage('../image/icon-arrow-right-50x50.png', no-repeat, center, center, 100%, 100%);
			@include transition(all, .3s, ease, 0);

			&:hover{
				@include backgroundImage('../image/icon-arrow-right-hover-50x50.png', no-repeat, center, center, 100%, 100%);
				@include transition(all, .3s, ease, 0);
			}
		}
	}

	.pagination{
		@include position(absolute, 30, none, none, 85px, 0);
		width: 100%;
		min-width: 1100px;

		ul{
			height: 10px;
			text-align: center;
			font-size: 0;

			li{
				position: relative;
				display: inline-block;
				width: 10px;
				height: 10px;
				padding: 0 15px;

				p{
					@include position(absolute, 31, 0, none, none, 50%);
					width: 10px;
					height: 10px;
					border-radius: 5px;
					background-color: rgba(255,255,255,.5);
					@include translate(-50%, 0, 0);
					@include transition(all, .5s, ease, 0);
				}

				&.active{
					p{
						width: 34px;
						background-color: rgba(255,255,255,1);
						@include transition(all, .5s, ease, 0);
					}
				}
			}
		}
	}
}


// ==============================================
// index-intro-one
// ==============================================
.index-intro-one{
	position: relative;
	background-color: #f1f0f3;
	
	.container{
		height: 1510px;
		overflow: hidden;
	}

	h1{
		margin-top: 186px;
		font-size: 50px;
		text-align: center;
		color: $color333;
		line-height: 80px;
		letter-spacing: 4px;
	
		opacity: 0;
		@include translate(0, 70%, 0);
		@include transitionTransform(opacity, .8s, ease, 0);

		&.active{
			opacity: 1;
			@include translate(0, 0, 0);
			@include transitionTransform(opacity, .8s, ease, .1s);
		}
	}
	h4{
		margin-top: 8px;
		font-size: 20px;
		text-align: center;
		color: $color666;
		line-height: 30px;

		opacity: 0;
		@include translate(0, 150%, 0);
		@include transitionTransform(opacity, .5s, ease, 0);

		&.active{
			opacity: 1;
			@include translate(0, 0, 0);
			@include transitionTransform(opacity, .5s, ease, .5s);
		}
	}

	ul{
		margin-top: 63px;

		li{
			float: left;
			width: 540px;
			height: 438px;
			margin-bottom: 20px;
			background-color: $colorFFF;
			opacity: 0;
			@include translate(0, 10%, 0);

			&:nth-of-type(2n+1) {
				margin-right: 20px;
			}

			.img{
				height: 300px;
				background-color: #423e59;
			}
			h2{
				margin-top: 26px;
				font-size: 30px;
				color: $color333;
				line-height: 50px;
				text-align: center;
			}
			h3{
				font-size: 16px;
				color: $color999;
				line-height: 36px;
				text-align: center;
			}

			&.item-1{
				.img{
					@include backgroundImage('../image/index-intro-one-1-540x300.jpg', no-repeat, center, center, 100%, 100%);
				}
			}
			&.item-2{
				.img{
					@include backgroundImage('../image/index-intro-one-2-540x300.jpg', no-repeat, center, center, 100%, 100%);
				}
			}
			&.item-3{
				.img{
					@include backgroundImage('../image/index-intro-one-3-540x300.jpg', no-repeat, center, center, 100%, 100%);
				}
			}
			&.item-4{
				.img{
					background-color: #655f86;
					@include backgroundImage('../image/index-intro-one-4-540x300.jpg', no-repeat, center, center, 100%, 100%);
				}
			}
		}

		&.active{
			li{
				opacity: 1;
				@include translate(0, 0, 0);

				&.item-1{
					@include transitionTransform(opacity, .5s, ease, .8s);
				}
				&.item-2{
					@include transitionTransform(opacity, .5s, ease, 1s);
				}
				&.item-3{
					@include transitionTransform(opacity, .5s, ease, 1.2s);
				}
				&.item-4{
					@include transitionTransform(opacity, .5s, ease, 1.4s);
				}
			}
		}
	}
}


// ==============================================
// c
// ==============================================
.c-banner{
	width: 100%;
	height: 513px;
	@include backgroundImage('../image/c-banner-bg-1920x513.jpg', no-repeat, center, center, auto, 100%);

	.tel{
		@include position(absolute, 2, 108px, none, none, 57px);
		width: 416px;
		height: 545px;
		@include backgroundImage('../image/c-banner-tel-416x545.png', no-repeat, center, center, 100%, 100%);

		opacity: 0;
		@include translate(0, 10%, 0);

		&.active{
			opacity: 1;
			-webkit-transform: translate3d(0, 0, 0);
					transform: translate3d(0, 0, 0);
			@include transitionTransform(opacity, .5s, ease, 0);
		}
	}

	.text{
		@include position(absolute, 2, 223px, 49px, none, none);
		width: 477px;
		height: 100px;
		@include backgroundImage('../image/c-banner-text-477x100.png', no-repeat, center, center, 100%, 100%);
	}

	.qrCode-box{
		@include position(absolute, 2, 364px, 202px, none, none);

		.button{
			display: block;
			width: 193px;
			height: 42px;
			border: 1px solid $colorYellow;
			border-radius: 21px;
			font-size: 18px;
			line-height: 42px;
			color: $colorYellow;
			text-align: center;
			letter-spacing: 3px;
			@include transition(all, .2s, ease-in, 0);

			&:hover{
				color: $colorFFF;
				background-color: $colorYellow;
				@include transition(all, .2s, ease-in, 0);

				& + .qrCode-bg{
					display: block;
					opacity: 1;
					@include translate(0, -30px, 0);
					@include transitionTransform(opacity, .2s, ease, 0);
				}
			}
	
		}
		.qrCode-bg{
			@include position(absolute, 2, 94px, -9px, none, none);
			width: 212px;
			height: 222px;
			@include backgroundImage('../image/c-qrCode-bg-212x222.png', no-repeat, center, center, 100%, 100%);
			opacity: 0;
			@include translate(0, 0, 0);
			@include transitionTransform(opacity, .2s, ease, 0);


			.qrCode{
				width: 180px;
				height: 180px;
				margin: 27px 0 0 17px;
				@include backgroundImage('../image/c-qrCode-180x180.jpg', no-repeat, center, center, 100%, 100%);
			}

			.shadow{
				@include position(absolute, 2, none, none, 0, 0);
				width: 212px;
				height: 137px;
				@include boxShadow(10px, 10px, 30px, #f3f3f3);
			}
		}
	}
}


// ==============================================
// index-news
// ==============================================
.index-news{
	position: relative;

	.container{
		height: 1057px;
		border-top: 1px solid $colorFFF;
	}

	h1{
		margin-top: 277px;
		font-size: 40px;
		line-height: 60px;
		color: $color333;
		text-align: center;

		opacity: 0;
		@include translate(0, 70%, 0);

		&.active{
			opacity: 1;
			@include translate(0, 0, 0);
			@include transitionTransform(opacity, .8s, ease, .1s);
		}
	}

	ul{
		margin-top: 46px;
		padding: 0 10px;

		li{
			position: relative;
			float: left;
			width: 350px;
			height: 430px;
			margin: 0 5px;

			opacity: 0;
			@include translate(0, 15%, 0);

			.link{
				display: block;
				width: 320px;
				height: 400px;
				padding: 15px;
				@include transition(all, .5s, ease, 0);

				&:hover{
					background-color: $colorFFF;
					@include boxShadow(0, 0, 30px, rgba(0,0,0,.2));
					@include transition(all, .5s, ease, 0);
				}

				.imgbox{
					width: 320px;
					height: 180px;
					overflow: hidden;
					background-color: #f7f7f7;

					img{
						width: 100%;
						height: 100%;
					}
				}
				.news-box{
					height: 149px;
					margin-top: 21px;
					overflow: hidden;
					line-height: 24px;

					.title{
						font-size: 16px;
						color: $color333;
					}
					.desc{
						margin-top: 10px;
						font-size: 14px;
						color: $color999;
					}
				}
				.info{
					margin-top: 18px;
					color: $color999;
					font-size: 14px;
					line-height: 24px;

					.date{
						float: left;
					}
					.resource{
						float: left;
						margin-left: 17px;
					}
				}
			}
		}

		&.active{
			li{
				opacity: 1;
				@include translate(0, 0, 0);

				&:nth-of-type(1){
					@include transitionTransform(opacity, .5s, ease, .3s);
				}
				&:nth-of-type(2){
					@include transitionTransform(opacity, .5s, ease, .5s);
				}
				&:nth-of-type(3){
					@include transitionTransform(opacity, .5s, ease, .7s);
				}
			}
		}
	}

	.btn-more{
		display: block;
		width: 138px;
		height: 42px;
		margin: 62px auto 0;
		border: 1px solid $colorE0;
		border-radius: 21px;
		font-size: 16px;
		line-height: 42px;
		color: $color999;
		text-align: center;	
		@include transition(all, .3s, ease, 0);

		&:hover{
			border: 1px solid $colorYellow;
			background-color: $colorYellow;
			color: $colorFFF;
			@include transition(all, .3s, ease, 0);
		}
	}
}






@media screen and (max-width: 1601px){

// ==============================================
// index-banner
// ==============================================
.index-banner{
	.swiper-wrapper{
		height: 456px;

		.swiper-slide{
			height: 456px;

			.container{
				height: 456px;
			}
			
			.btn-box{
				.btn-detail{
					margin: 65px auto 0;
				}
			}
			
			&.slide-01{
				@include backgroundImage('../image/index-banner-bg-1-1920x456.jpg', no-repeat, center, center, auto, 100%);
				
				h1{
					margin: 81px auto 0;
				}
				h2{
					margin: 43px auto 0;
				}
			}
			&.slide-02{
				@include backgroundImage('../image/index-banner-bg-2-1920x456.jpg', no-repeat, center, center, auto, 100%);
				
				h1{
					margin: 91px auto 0;
				}
				h2{
					margin: 34px auto 0;
				}
			}
		}
	}

	.arrow-bar{
		@include position(absolute, 30, 203px, none, none, 0);
	}

	.pagination{
		@include position(absolute, 30, none, none, 30px, 0);
	}
}



// ==============================================
// index-intro-one
// ==============================================
.index-intro-one{
	.container{
		height: 1155px;
	}

	h1{
		margin-top: 56px;
	}

	ul{
		margin-top: 38px;
	}
}


// ==============================================
// c
// ==============================================
.c-banner{
	height: 443px;
	@include backgroundImage('../image/c-banner-bg-1920x443.jpg', no-repeat, center, center, auto, 100%);

	.tel{
		@include position(absolute, 2, 38px, none, none, 57px);
	}

	.text{
		@include position(absolute, 2, 153px, 49px, none, none);
	}

	.qrCode-box{
		@include position(absolute, 2, 294px, 202px, none, none);
	}
}


// ==============================================
// index-news
// ==============================================
.index-news{
	.container{
		height: 847px;
	}

	h1{
		margin-top: 207px;
	}

	ul{
		margin-top: 21px;
	}

	.btn-more{
		margin: 47px auto 0;
	}
}

}

